<template>
    <div class="setting-profile">
        <el-form
            class="profile-form"
            ref="profileRef"
            :model="profileForm"
            :rules="profileRules"
            hide-required-asterisk
            label-width="68px"
        >
            <el-form-item label="用户姓名" prop="user_name">
                <el-input v-model="profileForm.user_name"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-select
                    v-model="profileForm.gender"
                    placeholder="性别"
                    class="el-full"
                >
                    <el-option label="保密" :value="1" />
                    <el-option label="男" :value="2" />
                    <el-option label="女" :value="23" />
                </el-select>
            </el-form-item>
            <!-- <el-form-item label="居住地" prop="area">
                <el-cascader
                    v-model="form.area"
                    :options="provinceAndCityData"
                    clearable
                    filterable
                />
            </el-form-item> -->
            <el-form-item label="生日" prop="birthday">
                <el-date-picker
                    v-model="profileForm.birthday"
                    type="date"
                    placeholder="年月日"
                    style="width: 100%"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="个人简介" prop="brief">
                <el-input
                    v-model="profileForm.profile"
                    type="textarea"
                    :rows="5"
                    resize="none"
                >
                </el-input>
            </el-form-item>
            <div style="text-align: center">
                <el-button @click="cancel(profileRef)">重 置</el-button>
                <el-button
                    type="primary"
                    :loading="loading"
                    @click="submit(profileRef)"
                >
                    保 存
                </el-button>
            </div>
        </el-form>
        <div class="profile-avatar">
            <avatar :size="72"></avatar>
            <el-upload
                :show-file-list="false"
                :auto-upload="false"
                :on-change="fileSelect"
                accept="image/jpg, image/jpeg, image/png"
            >
                <el-button style="margin: 15px 0 10px 0" size="small"
                    >上传头像</el-button
                >
            </el-upload>
            <span class="avatar-tips">支持jpg、png格式大小2M以内的图片</span>
        </div>
    </div>
    <!-- 裁剪图片 -->
    <el-dialog
        v-model="cropperShow"
        title="头像裁剪"
        width="650px"
        destroy-on-close
        draggable
    >
        <crooperAvatar
            :img="crooperImage"
            @cancel="cropperShow = false"
            @confirm="cropperConfirm"
        ></crooperAvatar>
    </el-dialog>
</template>

<script lang="ts" setup>
import { FormInstance, FormRules, UploadProps } from 'element-plus'
import { ProfileForm } from '@/types'
import { ref } from 'vue'
import avatar from '@/components/common/avatar.vue'
import crooperAvatar from '@/views/user/cropper-avatar.vue'

const loading = ref<boolean>(false)
const profileRef = ref<FormInstance>()
const profileForm = ref<ProfileForm>({
    user_id: '',
    user_name: '',
    profile: '',
    gender: 3,
    area: [],
    birthday: '',
})

const profileRules = ref<FormRules<ProfileForm>>({
    user_name: [
        {
            required: true,
            message: '用户名不能为空',
            trigger: ['blur', 'change'],
        },
    ],
})

// 点击上传头像
const cropperShow = ref<boolean>(false)
const crooperImage = ref<string>('')
const fileSelect: UploadProps['onChange'] = (uploadFile) => {
    const file: File = uploadFile.raw as File
    const reader: FileReader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = (): void => {
        crooperImage.value = String(reader.result)
        cropperShow.value = true
    }
}

// 裁剪完成
const cropperConfirm = (file: File) => {
    // const formData: any = new FormData()
    console.log('file', file)
}

// 取消
const cancel = (el: FormInstance | undefined) => {
    if (!el) return
    el.resetFields()
}

// 提交
const submit = (el: FormInstance | undefined) => {
    if (!el) return
    loading.value = !loading.value
    el.validate(async (valid) => {
        if (valid) {
            console.log('验证完成')
        }
    })
}
</script>

<style lang="less" scoped>
// el元素撑满
.el-full {
    width: 100%;
}
.setting-profile {
    display: flex;
    .profile-form {
        flex: 1;
        :deep(.el-input__wrapper) {
            width: 100%;
            box-sizing: border-box;
        }
        :deep(.el-cascader) {
            width: 100%;
            box-sizing: border-box;
        }
    }
}
.profile-avatar {
    width: 150px;
    margin-left: auto;
    padding-left: 30px;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    .avatar-tips {
        display: block;
        font-size: var(--font-size-small);
        color: var(--color-text-l);
        line-height: 1.5;
    }
}
</style>
